<template>
<div class="full fix-top">
    <div id="PageHeader" class="PageHeader ">
        <div class=" container">
            <div class="left">
                <img class="logo" src="/static/images/manage/logo.png" style="height: 45px;margin-top: 3px;margin-left: 2px"></img>
                <span class="AppName">XXXX系统</span>
            </div>

            <div class="right">
                <Dropdown @on-click="onClicUserInfoBtn" trigger="click">
                    <a href="javascript:void(0)">
                        <Icon type="person"></Icon> 管理员
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <Dropdown-menu slot="list">
                        <Dropdown-item name="userInfo">个人信息</Dropdown-item>
                        <Dropdown-item name="signOut">注销退出</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
            <div class="center">
                <NavMenu mode='horizontal' type='1' parent-id='0' :current="CurModule.Top" :theme="theme.top" @on-select="onSelectTopMenu"></NavMenu>
            </div>
        </div>
    </div>
    <div id="PageContent" class="PageContent">
        <div id="PageLeft" class="PageLeft">
            <div class="ContentMain">  
                <NavMenu type='2' :parent-id='CurModule.Top' :current="CurModule.Left" :theme="theme.left" @on-select="onSelectLeftMenu"></NavMenu>
            </div>
        </div>
        <div id="PageMain" class="PageMain">
            <div class="PageMainContent">
                <div id="Guide" class="Guide" v-show="CurModule.IsShowGuide">
                    <div class="right"></div>
                    <div id="GuideMenu" class="content">
                        <NavMenu mode='horizontal' type='3' :parent-id='CurModule.Left' :current="CurModule.Guide" :theme="theme.guide" @on-select="onSelectGuideMenu"></NavMenu>
                    </div>
                </div>
                <div id="PageMainContent">
                    <div v-if="CurModuleID>0" class="ContentMain">
                        <router-view></router-view>
                    </div>
                    <div v-else>
                        <div class="NoModule">
                            <div class="code">401</div>
                            <div class="info">
                                <div class="content">您无权查看此页面,请联系管理员开通</div>
                                <div class="btn-contian">
                                    <Button type="ghost" @click="back()">返回</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <Modal v-model="IsShowUserInfoWin" @on-ok="onClickOk" :loading="modal_loading">
        <CurUserInfo ref="CurUserInfo"></CurUserInfo>
    </Modal>

</div>
</template>

<script>
import AppFrame from '../libs/app-frame';
import NavMenu from '../components/nav-menu.vue';
import CurUserInfo from './system/cur-user-info';
export default {
    components: {
        NavMenu,
        CurUserInfo
    },
    data: function() {
        return {
            theme: {
                top: 'dark',
                left: 'dark',
                guide: 'light'
            },
            CurModule: {
                Top: 0,
                Left: -1,
                Guide: -1
            },
            modal_loading: true,
            CurModuleID: 0,
            IsShowUserInfoWin: false

        }
    },
    created: function() {
        var url = location.pathname;
        this.analysis(url);
        this.$store.state.MsgBus.$on('UrlAfter', function(data) {
            this.analysis(data);
        }.bind(this));

    },
    computed: {
        a() {
            return this.$store.state.a
        }
    },
    mounted: function() {
        var self = this;
        AppFrame.Tools.Screen.OnReSize(function(W, H, Scale) {
            var HeaderHeight = $("#PageHeader").height();
            var MainHeight = H - HeaderHeight;
            $("#PageMain > .PageMainContent").css({
                "min-height": MainHeight + "px"
            });
            $("#PageLeft").height(MainHeight);
            self.FixLeftContentSlimScroll();

            self.$store.state.MsgBus.$emit("PageOnReSize", {
                WinWidth: W,
                WinHeight: H,
                Scale: Scale,
                MainHeight: MainHeight
            });
        });
        self.FixLeftContentSlimScroll();

    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        FixLeftContentSlimScroll() {
            if ($("#PageLeft").find(".ContentMain").length == 0) return;
            var ContentHeight = $("#PageLeft").height();

            $("#PageLeft").find(".ContentMain").slimScroll({
                height: ContentHeight,
                alwaysVisible: false,
                allowPageScroll: false,
                touchScrollStep: 200,
                color: "#999",
                size: "5px",
                distance: "2px"
            });
        },
        analysis(url) {

            var Module = AppFrame.UserModule.GetModuleByUrl(url);
            console.log(Module ,this.CurModuleID,url );
            if (Module) {
                window.document.title = Module.Name;
                this.CurModuleID = Module.ModuleID;
                var currentGuideModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(Module.ModuleID, 3);
                var currentLeftModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(Module.ModuleID, 2);
                var currentTopModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(Module.ModuleID, 1);
                if (currentTopModule) {
                    this.CurModule.Top = currentTopModule.ModuleID;
                }
                if (currentLeftModule) {
                    this.CurModule.Left = currentLeftModule.ModuleID;
                }
                if (currentGuideModule) {
                    this.CurModule.Guide = currentGuideModule.ModuleID;
                    this.CurModule.IsShowGuide = true;
                } else {
                    this.CurModule.IsShowGuide = false;
                }

                // console.log(currentGuideModule, currentLeftModule, currentTopModule);
            } else {

            }
        },
        onSelectTopMenu(ModuleID) {
            this.CurModule.Top = ModuleID;
        },
        onSelectLeftMenu(ModuleID) {
            this.CurModule.Left = ModuleID;
        },
        onSelectGuideMenu(ModuleID) {
            this.CurModule.Guide = ModuleID;
        },
        onClickOk() {
            let self = this;
            if (self.$refs["CurUserInfo"].CurTabName == "rePwdPlan") {
                this.$refs["CurUserInfo"].onRePwd(function(err, ret) {
                    self.modal_loading = false;
                    setTimeout(function() {
                        self.modal_loading = true;
                    }, 0);

                    if (ret && ret.Result == 1) {
                        self.$Message.success('密码修改成功');
                        self.IsShowUserInfoWin = false;
                    }
                });
            } else {
                self.IsShowUserInfoWin = false;
            }

        },

        onClicUserInfoBtn(selectName) {
            switch (selectName) {
                case "userInfo":
                    this.IsShowUserInfoWin = true;
                    break;
                case "signOut":
                    AppFrame.UserInfo.clear();
                    this.$router.push("/Manage/Login");
                    break;
            }

        },

        test() {
            this.$store.state.a++;
        }
    }
}
</script>

<style scoped>
.NoModule {
    margin: 50px;
    text-align: center;
}

.content {
    margin-top: 10px;
}

.code {
    font-size: 80px;
    color: #c0c0c0;
}

.btn-contian {
    margin-top: 20px
}
</style>